import React,{ Component,Fragment } from 'react';
import TodoItem from "./TodoItem"

class TodoList extends Component {
	constructor(props){
		super(props);
		this.handleChange = this.handleChange.bind(this);
		this.handleKeyUp = this.handleKeyUp.bind(this);
		this.handleClick = this.handleClick.bind(this);
		this.state = {
			inputValue: "",
			list: []
		}
	}
	handleChange(e){
		this.setState({inputValue: e.target.value})
	}
	handleKeyUp(e){
		if(e.keyCode === 13 && e.target.value !== ""){
			const list = [...this.state.list,this.state.inputValue];
			this.setState({
				list,
				inputValue: "" 
			})
		}
	}
	handleClick(index){
		const list = [...this.state.list];
		list.splice(index,1);
		this.setState({list});
	}
	getList(){
		return this.state.list.map((item,index)=>{
			return (
				<TodoItem
					key={index}
					content={item}
					index={index}
					deleteFunction = { this.handleClick }
				/>
			)
		})
	}
	render(){
		return (
			<Fragment>
				{/* 这是一个注释，在jsx标签内的注释要包裹在花括号里面 */}
				<label htmlFor="myInput">请输入内容</label>
				<input
				  id="myInput"
					value={this.state.inputValue}
					onChange={this.handleChange}
					onKeyUp={this.handleKeyUp}
				/>
				<ul>{this.getList()}</ul>
			</Fragment>
		)
	}
}

export default TodoList;